<?php
    $this->layout('base.phtml', [
        'title' => _('Edit a password'),
        'canonical' => url_full('edit password'),
        'has_errors' => $error || $errors,
    ]);
?>

<div class="section section--small">
    <div class="section__title">
        <h1><?= _('Edit a password') ?></h1>
    </div>

    <?php if (isset($token)): ?>
        <p class="section__intro">
            <?= _f('You’re changing the password of %s.', $email) ?>
        </p>

        <form method="post" action="<?= url('update password', ['t' => $token]) ?>">
            <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>

            <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />

            <div class="form-group <?= isset($errors['password_hash']) ? 'form-group--invalid' : '' ?>">
                <label for="new-password">
                    <?= _('Your new password') ?>
                    <span class="label__help">
                        <?= _('(recommended at least 8 characters)') ?>
                    </span>
                </label>

                <div class="form-group__stack" data-controller="input-password">
                    <input
                        id="new-password"
                        name="password"
                        type="password"
                        required
                        data-input-password-target="input"
                        autocomplete="new-password"
                        aria-describedby="password-desc"
                    />

                    <button
                        type="button"
                        class="no-mobile js-only"
                        data-action="input-password#toggle"
                        data-input-password-target="button"
                        aria-label="<?= _('Show password as plain text. Note: this will visually expose your password.') ?>"
                    >
                        <?= icon('eye') ?>
                        <?= _('Show') ?>
                    </button>
                </div>

                <div id="password-desc">
                    <?php if (isset($errors['password_hash'])): ?>
                        <p class="form-group__error">
                            <span class="sr-only"><?= _('Error') ?></span>
                            <?= $errors['password_hash'] ?>
                        </p>
                    <?php endif; ?>
                </div>
            </div>

            <div class="form__actions">
                <button type="submit" class="button--primary">
                    <?= _('Change your password') ?>
                </button>
            </div>
        </form>
    <?php else: ?>
        <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
    <?php endif; ?>
</div>
